<template>
  <div id="app">
    <el-button-group>
      <el-button type="primary" size="mini" @click="handleUndo">后退</el-button>
      <el-button type="success" size="mini" @click="handleRedo">前进</el-button>
      <el-button type="warning" size="mini" @click="handleDownload">下载</el-button>
      <el-upload style="display: inline-block;" :file-list="fileList" class="upload-demo" action="" :auto-upload="false"
                 :show-file-list="false" :on-change="handleOnchangeFile" :on-remove="handleRemove"
                 :before-remove="beforeRemove">
        <el-button type="danger" size="mini">导入</el-button>
      </el-upload>
    </el-button-group>
    <div id="container"></div>
  </div>
</template>

<script>
import BpmnModeler from 'bpmn-js/lib/Modeler';
import camundaExtension from '@/camunda/camunda.json'; //定义各个元素拥有的属性配置
import customTranslate from "@/conf/customTranslate";
export default {
  name: 'App',
  data() {
    return {
      containerEl: null,
      bpmnModeler: null,
      fileList: [],
    }
  },
  mounted() {
    let customTranslateModule={
      translate:["value",customTranslate]
    };
    this.containerEl = document.getElementById('container');
    this.bpmnModeler = new BpmnModeler({
      container: this.containerEl,
      moddleExtensions: {camunda: camundaExtension},
      additionalModules: [
        // 汉化
        customTranslateModule,
      ],
    });
    this.create();
  },
  methods: {
    create() {
      this.bpmnModeler.createDiagram(() => {
        this.bpmnModeler.get('canvas').zoom('fit-viewport');
      });
    },
    handleRemove(file) {
      for (let i = 0; i < this.fileList.length; i++) {
        if (file.name === this.fileList[i].name) {
          this.fileList.splice(i, 1);
        }
      }
    },
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 后退
    handleUndo() {
      this.bpmnModeler.get('commandStack').undo();
    },
    // 前进
    handleRedo() {
      this.bpmnModeler.get('commandStack').redo();
    },
    handleDownload() {
      this.bpmnModeler.saveXML({format: true}, (err, data) => {
        const dataTrack = 'bpmn';
        const a = document.createElement('a');
        const name = `diagram.${dataTrack}`;
        a.setAttribute(
            'href',
            `data:application/bpmn20-xml;charset=UTF-8,${encodeURIComponent(data)}`
        );
        a.setAttribute('target', '_blank');
        a.setAttribute('dataTrack', `diagram:download-${dataTrack}`);
        a.setAttribute('download', name);
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      });
    },
    handleOnchangeFile(file) {
      const reader = new FileReader();
      let data = '';
      reader.readAsText(file.raw);
      reader.onload = (event) => {
        data = event.target.result;
        this.bpmnModeler.importXML(data, (err) => {
          if (err) {
            this.$message.info('导入失败');
          } else {
            this.$message.success('导入成功');
          }
        });
      };
    }

  }
}
</script>

<style>


#app {
  width: 100%;
  height: 100%;
}

body, html {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

#container {
  height: calc(100% - 50px);
  background-size: 20px 20px, 20px 20px, 10px 10px, 10px 10px;
  background-image: linear-gradient(to right, #dfdfdf 1px, transparent 1px), linear-gradient(to bottom, #dfdfdf 1px, transparent 1px), linear-gradient(to right, #f1f1f1 1px, transparent 1px), linear-gradient(to bottom, #f1f1f1 1px, transparent 1px);
  background-position: left -1px top -1px, left -1px top -1px, left -1px top -1px, left -1px top -1px;
}
</style>
